<template>
  <div>
    <Row class="y_query_right">
      <Input placeholder="名称或标题" v-model.trim="searchParam.name" class="y_condition" clearable></Input>
      <Input placeholder="标签名称" v-model.trim="searchParam.tag" class="y_condition" clearable></Input>
      <Select class="y_condition" placeholder="显示平台" v-model="searchParam.platform" :clearable="!isPlatformsLimited" style="text-align: left;">
        <Option v-for="item in showroomPlatforms" :value="item.value" :key="item.value" :disabled="isPlatformDisabled(item.value)">{{ item.label }}</Option>
      </Select>
      <Select class="y_condition" placeholder="展厅状态" v-model="searchParam.state" clearable style="text-align: left;">
        <Option v-for="item in showroomStates" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </Row>
    <Row class="y_query_right">
      <Cascader v-if="isCategoryType && categoryList.length > 0" :data="categoryList" @on-change="categorySelected" change-on-select clearable
                placeholder="产品分类" class="y_condition" style="text-align: left; min-width: 300px;"></Cascader>
      <Select class="y_condition" placeholder="展厅类型" v-model="searchParam.type" clearable style="text-align: left;">
        <Option v-for="item in showroomTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Input placeholder="固定网址" v-model.trim="searchParam.shortLink" class="y_condition" style="max-width: 250px; width: 250px;" clearable></Input>
      <Button type="primary" icon="md-search" class="y_condition" @click="search()">查询</Button>
    </Row>

<!--    <Table ref="showroomTable" stripe border class="base_table" :columns="tableTitles" :data="list"
           no-data-text="暂无数据" @on-selection-change="selectionChange"></Table>-->
    <List border style="margin: 1rem 0rem">
      <template v-if="list==null || list.length==0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <ListItem v-for="(item,index) in list" :key="item.id" class="list-item">
          <table style="width: 100%;" cellspacing="0">
            <tr>
              <td style="width: 30px; vertical-align: top;">
                <input type="radio" v-if="isSingleSelect" name="showroom_radio" class="select-box" @click="radioClick(item)"></input>
                <input type="checkbox" v-else name="showroom_checkbox" class="select-box" @click="checkboxClick(item, $event)"></input>
              </td>
<!--              <td style="width: 30px;">
                {{index+1}}
              </td>-->
              <td>
                <div class="item-top">
                  <p style="font-weight: bold; vertical-align: middle;">标题：{{ item.title==null?item.name:item.title }}</p>
                  <div v-if="item.tags!=null && item.tags.length>0" style="margin-left: 10px; float: right;">
                    <Tag border color="purple">标签: {{getStandsTags(item.tags)}}</Tag>
                  </div>
                </div>
                <div>
                  <KeyValueView title="备注" oneline :value="item.note" ></KeyValueView>
                </div>
                <div>
                  <KeyValueView title="展厅状态" v-if="isAppPlatform(item.platform)">{{getStandsState(item.state)}}</KeyValueView>
                  <KeyValueView title="展厅状态">{{getStandsState(item.state)}}-{{getStandsPublishState(item.publishState)}}</KeyValueView>
                  <KeyValueView title="内部名称" :value="item.name" ></KeyValueView>
                  <KeyValueView title="最后更新" :value="$tiyBJTime(item.lastModifyTime)" ></KeyValueView>
                  <KeyValueView title="最后发布" :value="$tiyBJTime(item.lastPublishTime)" ></KeyValueView>
                </div>
                <div>
                  <KeyValueView title="固定网址" oneline :value="getStandsShortLink(item)" ></KeyValueView>
                </div>
                <div>
                  <p>
                    <Tag color="volcano">{{getStandsType(item.type)}}</Tag>
                    <Tag color="blue">{{getStandsPlatform(item.platform)}}</Tag>
                  </p>
                </div>
              </td>
            </tr>
          </table>
        </ListItem>
      </template>
    </List>
    <div style="text-align: right;">
      <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum" @on-change="pageNumChange"
            @on-page-size-change="pageSizeChange" :page-size-opts="page.options"
            show-sizer show-elevator></Page>
    </div>
  </div>
</template>

<script>
import showroomData from "./js/showroomData";
import commonData from "../js/stand/common_data";
import {isEmpty} from "../../js/commonUtils";
import KeyValueView from "../../widgets/KeyValueView";

export default {
  name: "ShowroomSelection",
  props: {
    isSingleSelect: {type: Boolean, default: true},
    limitPlatforms: {type: Array, default: function () {return []}},
    categoryList: {type: Array, default: function () {return []}},
  },
  components: {
    KeyValueView
  },
  data() {
    return {
      list: showroomData.tData.list,
      page: showroomData.tPage,
      showroomPlatforms: showroomData.tStatus.platforms,
      showroomTypes: showroomData.tStatus.types,
      showroomStates: showroomData.tStatus.states,
      searchParam: showroomData.tParam,
    }
  },
  methods: {
    selectionChange(selection) {
      if(!this.isSingleSelect) {
        showroomData.tData.selectedList = selection;
      }
    },
    pageNumChange(pageNum) {
      showroomData.tPage.pageNum = pageNum;
      showroomData.tData.selectedList.splice(0);
      this.$emit("query-list");
    },
    pageSizeChange(pageSize) {
      showroomData.tPage.pageNum = 1;
      showroomData.tPage.pageSize = pageSize;
      showroomData.tData.selectedList.splice(0);
      this.$emit("query-list");
    },
    search() {
      showroomData.tPage.pageNum = 1;
      showroomData.tData.selectedList.splice(0);
      this.$emit("query-list");
    },
    getPlatform(platform) {
      let element = showroomData.tStatus.platforms.find(element => element.value == platform);
      return element==null?"":element.label;
    },
    getState(state) {
      let element = showroomData.tStatus.states.find(element => element.value == state);
      return element==null?"":element.label;
    },
    getType(type) {
      let element = showroomData.tStatus.types.find(element => element.value == type);
      return element==null?"":element.label;
    },
    isPlatformDisabled(platform) {
      return !this.limitPlatforms.includes(platform);
    },
    categorySelected(value, selectedData) {
      if (0 < selectedData.length) {
        showroomData.tParam.classificationId = selectedData[selectedData.length - 1].value;
        showroomData.tParam.classificationLevel = selectedData[selectedData.length - 1].level;
      }else{
        showroomData.tParam.classificationId = "";
        showroomData.tParam.classificationLevel = null;
      }
    },
    getStandsTags(tags) {
      if(tags==null || tags=="") {
        return "";
      }
      return this.$toJson(tags).join(",");
    },
    radioClick(item) {
      showroomData.tData.selectedList.splice(0);
      showroomData.tData.selectedList.push(item);
    },
    checkboxClick(item, event) {
      if(event.target.checked) {
        showroomData.tData.selectedList.push(item);
      }else{
        for(let i=0; i<showroomData.tData.selectedList.length; i++) {
          if(showroomData.tData.selectedList[i].id == item.id) {
            showroomData.tData.selectedList.splice(i, 1);
            break;
          }
        }
      }
    },
    isAppPlatform(platform) {
      return platform == commonData.standsDic.appPlatform;
    },
    getStandsState(state) {
      let element = commonData.standsDic.states.find(element => element.value == state);
      return element==null?"":element.label;
    },
    getStandsPublishState(publishState) {
      let element = commonData.standsDic.pageStates.find(element => element.value == publishState);
      return element==null?"":element.label;
    },
    getStandsShortLink(item) {
      if(isEmpty(item.shortLink)) {
        if(this.isIndexPageType(item.type)) {
          return this.$store.getters.webDomain;
        }else{
          return "";
        }
      }else{
        return this.$store.getters.webDomain+item.shortLink;
      }
    },
    isIndexPageType(type) {
      return type == commonData.standsDic.indexPageType;
    },
    getStandsType(type) {
      let element = commonData.standsDic.types.find(element => element.value == type);
      return element==null?"":element.label;
    },
    getStandsPlatform(platform) {
      let element = commonData.standsDic.platforms.find(element => element.value == platform);
      return element==null?"":element.label;
    },
  },
  computed: {
    tableTitles() {
      let self = this;
      return [
        this.firstColumn,
        {title: "序号", type: 'index', align: 'center', width: 80},
        {title: '标题', key: 'title', align: 'left', minWidth: 150, tooltip: true},
        {title: '名称', key: 'name', align: 'left', width: 150},
        {title: '备注', key: 'note', align: 'left', width: 200, tooltip: true},
        {title: '类型', align: 'center', width: 100,
          render(h, params) {
            let type = self.getType(params.row.type);
            return h("span", type);
          }
        },
        {title: '平台', align: 'center', width: 120,
          render(h, params) {
            let platform = self.getPlatform(params.row.platform);
            return h("span", platform);
          }
        },
        {title: '状态', align: 'center', width: 80,
          render(h, params) {
            let state = self.getState(params.row.state);
            return h("span", state);
          }
        },
      ]
    },
    firstColumn() {
      if(this.isSingleSelect) {
        return {title: '选择', align: 'center', width: 80,
          render(h, params) {
            return h("input", {
              on: {
                click() {
                  showroomData.tData.selectedList.splice(0);
                  showroomData.tData.selectedList.push(params.row);
                }
              },
              attrs: {
                name: "showroom",
                type: "radio",
                value: params.row.id,
              },
              style: {
                margin: 0,
                width: "20px",
                height: "20px",
                verticalAlign: "middle",
              },
            }, "");
          }
        };
      }else{
        return {type: "selection", align: 'center', width: 80};
      }
    },
    isPlatformsLimited() {
      return this.limitPlatforms.length > 0;
    },
    isCategoryType() {
      return this.searchParam.type == commonData.standsDic.categoryType;
    }
  }
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../../css/base";
.list-item {
  .flex-colum-wrap;
  justify-items: left;
  align-items: start;
  line-height: 26px;

  .item-top {
    width: 100%;
    .flex-row-wrap;
    justify-content: space-between;
  }
}

.select-box {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
</style>
